import React from 'react';
import {
    Form,
    Input,
    Tooltip,
    Checkbox,
    Button,
    notification
} from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import axios from 'axios';
class Register extends React.Component {
state={
    form: [],
}
handleSubmit() {
    axios.post('/register', {
    //   username: this.state.username,
      password: this.state.password,
      email: this.state.email,
      username:this.state.nickname,
    })
    .then((response)=>{
        console.log(response.data.msg);
        if (response.data.state) {
          this.loginSuccess('success');
        }else{
            this.loginError('error');
        }
    }, err => {
      console.log("失败");
      alert("意外错误");
    })
  }
  loginError = type => {
    notification[type]({
      message: '注册失败！',
      description:
        '此用户已经被注册！',
    });
  };  
    loginSuccess = type => {
      notification[type]({
        message: '注册成功',
        description:
          '请登录',
      });
    };
    render() {
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };
            const onFinish = values => {
                console.log(values.password);
                this.setState({
                    username:values.username,
                    password:values.password,
                    email:values.email,
                    nickname:values.nickname,
                },() => this.handleSubmit())
            };
            return (
                <Form
                    {...formItemLayout}
                    name="register"
                    onFinish={onFinish}
                    scrollToFirstError
                >
                    <Form.Item
                        name="nickname"
                        label={
                            <span>
                                游戏内用户名&nbsp;
            <Tooltip title="如果输入的用户名不在白名单内，会注册失败！">
                                    <QuestionCircleOutlined />
                                </Tooltip>
                            </span>
                        }
                        rules={[{ required: true, message: '请输入正确的游戏内用户名', whitespace: true }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="email"
                        label="邮箱"
                        rules={[
                            {
                                type: 'email',
                                message: '这是个邮箱？',
                            },
                            {
                                required: true,
                                message: '请输入你的邮箱账号',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        label="密码"
                        rules={[
                            {
                                required: true,
                                message: '请输入你的密码！',
                            },
                        ]}
                        hasFeedback
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item
                        name="confirm"
                        label="确认密码"
                        dependencies={['password']}
                        hasFeedback
                        rules={[
                            {
                                required: true,
                                message: '请输入你的密码！',
                            },
                            ({ getFieldValue }) => ({
                                validator(rule, value) {
                                    if (!value || getFieldValue('password') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject('两次密码不一样啊啊啊啊');
                                },
                            }),
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        name="agreement"
                        valuePropName="checked"
                        rules={[
                            {
                                validator: (_, value) =>
                                    value ? Promise.resolve() : Promise.reject('必须同意许可协议'),
                            },
                        ]}
                        {...tailFormItemLayout}
                    >
                        <Checkbox>
                            我已经同意 <a href="/agreement">许可协议</a>
                        </Checkbox>
                    </Form.Item>
                    <Form.Item {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit">
                            注册
        </Button>
                    </Form.Item>
                </Form>
            );
        };
    }


export default Register;